<template>
  <div class="container box common-table-panel">
    <div class="operate-btn">
      <el-button size="mini" class="btn" type="primary">全部已办</el-button>
      <el-button size="mini" class="btn" type="primary">显示未办</el-button>
    </div>
    <div class="tableBox table-panel">
      <div class="tableBoxChild">
        <CommonTable
          :tableColumns="tableColumns"
          :tableData="tableData"
          :page="page"
          @handerSortChange="handerSortChange"
          @filterTable="filterTable"
        />
      </div>
      <div class="con-footer pagination">
        <Pagination
          :total="total"
          :page.sync="page.page"
          :limit.sync="page.size"
          layout="prev, pager, next"
          @pagination="getData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import CommonTable from "@/components/CommonTable";

export default {
  name: "RemindersOne",
  components: {
    Pagination,
    CommonTable,
  },
  data() {
    return {
      tableColumns: [
        {
          column: "name",
          label: "待办名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 120,
          sortable: "custom", // true, false, 'custom'(远程handerSortChange)
          headerFilter: true,
          filterType: "select", // select,input,date,daterange,空
          filterValue: [],
          headerFilterList: [
            {
              text: "111",
              value: "111",
              id: "待办名称",
            },
            {
              text: "222",
              value: "333",
              id: "待办名称",
            },
            {
              text: "444",
              value: "444",
              id: "待办名称",
            },
            {
              text: "555",
              value: "555",
              id: "待办名称",
            },
          ],
        },
        {
          column: "content",
          label: "待办内容",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 120,
          sortable: true,
          headerFilter: true,
          filterType: "input",
          filterValue: "text",
        },
        {
          column: "moudle",
          label: "所属模块",
          align: "right",
          overflow: true, // 超出长度
          show: true, // 是否显示
          width: 140,
          sortable: true,
          headerFilter: true,
          filterType: "date",
          filterValue: "",
        },
        {
          column: "createDate",
          label: "数据日期",
          align: "right",
          overflow: true, // 超出长度
          show: true, // 是否显示
          sortable: true,
          headerFilter: true,
          filterType: "daterange",
          filterValue: [],
        },
        {
          column: "status",
          label: "状态",
          align: "right",
          overflow: true, // 超出长度
          show: true, // 是否显示
        },
      ],
      tableData: [
        {
          name: "客户移交申请审批",
          content: "张三-客户移交申请审批",
          moudle: "归属管理",
          createDate: "2022-09-01",
          status: "未处理",
        },
        {
          name: "客户移交申请审批",
          content: "张三-客户移交申请审批",
          moudle: "归属管理",
          createDate: "2022-09-01",
          status: "未处理",
        },
      ],
      page: {
        size: 10,
        page: 1,
      },
      total: 0,
    };
  },

  mounted() {},

  methods: {
    getData() {},
    // 远程排序
    handerSortChange({ column, prop, order }) {
      console.log("sortChange 点击排序", column, prop, order);
    },
    // 远程搜索
    filterTable(obj) {
      console.log("filterTable 点击筛选", obj);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #262d47;
}
.operate-btn {
  padding: 10px 10px 0 10px;
}
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.tableBox {
  background-color: #262d47;
  flex: 1;
  padding: 15px 10px;
}

.tableBoxChild {
  min-height: 500px;
}
</style>
